import React from "react";
import { View, Image, Text, TextInput, TouchableOpacity } from "react-native";
import BaseComponent from "../common/BaseComponent";
import SizeUtils from "../../common/SizeUtils";
import CommonShowPickerAction from "../../actions/common/CommonShowPickerAction";
import JianYiSubmitAction from "../../actions/jianyi/JianYiSubmitAction";
import ToastUtils from "../../common/ToastUtils";

export default class SuggestionsView extends BaseComponent {
	constructor(props) {
		super(props);
		this.state = {
			content: "",
			typeValue: "对App的建议或意见"
		};
	}
	shouldComponentUpdate(nextProps, nextState) {
		if (nextState.updateSucess === true) {
			nextState.updateSucess = false;
			ToastUtils.show("提交成功");
			nextState.content = "";
		}
		return true;
	}
	render() {
		return (
			<View
				style={{
					flex: 1,
					width: SizeUtils.getWindowSize().width,
					backgroundColor: "#F2F2F2"
				}}
			>
				<View
					style={{
						height: SizeUtils.translateDesignHeightToCode(20),
						width: SizeUtils.getWindowSize().width
					}}
				/>
				{this._renderTypeButton()}
				{this._renderContent()}
				{this._renderBottomButton()}
			</View>
		);
	}
	_renderContent() {
		return (
			<View
				style={{
					height: SizeUtils.translateDesignHeightToCode(460),
					width: SizeUtils.getWindowSize().width,
					paddingTop: SizeUtils.translateDesignHeightToCode(20),
					paddingLeft: SizeUtils.translateDesignWidthToCode(28),
					paddingRight: SizeUtils.translateDesignWidthToCode(28),
					flexDirection: "row",
					backgroundColor: "#ffffff"
				}}
			>
				<Text
					style={{
						width: SizeUtils.translateDesignWidthToCode(80),
						color: "#000000",
						fontSize: SizeUtils.translateFontSizeToCode(28),
						marginTop: SizeUtils.translateDesignHeightToCode(10)
					}}
				>
					内容:
				</Text>
				<TextInput
					style={{
						color: "#000000",
						fontSize: SizeUtils.translateFontSizeToCode(28),
						width:
							SizeUtils.getWindowSize().width -
							SizeUtils.translateDesignWidthToCode(136),
						height: SizeUtils.translateDesignHeightToCode(400)
					}}
					onChangeText={content => {
						this.setState({ content });
					}}
					value={this.state.content}
					multiline
					underlineColorAndroid="transparent" // Android
					textAlignVertical="top" // Android
					placeholder="请输入您的反馈信息"
					placeholderTextColor="#888888"
				/>
			</View>
		);
	}
	_renderTypeButton() {
		return (
			<TouchableOpacity
				style={{
					height: SizeUtils.translateDesignHeightToCode(72),
					width: SizeUtils.getWindowSize().width,
					backgroundColor: "#ffffff"
				}}
				disabled
				onPress={this._onTypePress}
			>
				<View
					style={{
						height: SizeUtils.translateDesignHeightToCode(72),
						flex: 1,
						flexDirection: "row",
						marginLeft: SizeUtils.translateDesignWidthToCode(28),
						marginRight: SizeUtils.translateDesignWidthToCode(28),
						alignItems: "center",
						justifyContent: "space-between",
						borderBottomWidth: SizeUtils.translateDesignNumToCode(
							3
						),
						borderBottomColor: "#eeeeee"
					}}
				>
					<Text
						style={{
							color: "#888888",
							fontSize: SizeUtils.translateFontSizeToCode(28)
						}}
					>
						{this.state.typeValue || "选择反馈类型"}
					</Text>
				</View>
			</TouchableOpacity>
		);
	}
	_onTypePress = () => {
		// const params = { pickerData: ["对App的建议或意见", "文体活动建议或意见", "投诉或举报"] };
		// new CommonShowPickerAction().call(this, {
		// 	...params,
		// 	callback: (value, value1) => {
		// 		this.setState({ typeValue: value });
		// 	}
		// });
	};
	_onEmptyPress = () => {
		this.setState({ content: "" });
	};
	_onSubmitPress = () => {
		const { content, typeValue } = this.state;
		const type = this.getType(typeValue);
		if (type === 0) {
			ToastUtils.show("请选择反馈类型");
			return;
		}
		if (content === "") {
			ToastUtils.show("您还没有填写反馈内容");
			return;
		}
		new JianYiSubmitAction().call(this, { title: content, type: type });
	};

	getType = typeValue => {
		switch (typeValue) {
			case "对App的建议或意见":
				return 1;
				break;
			case "文体活动建议或意见":
				return 2;
				break;
			case "投诉或举报":
				return 3;
				break;
			default:
				return 0;
		}
	};

	_renderBottomButton() {
		return (
			<View
				style={{
					height: SizeUtils.translateDesignHeightToCode(98),
					width: SizeUtils.getWindowSize().width,
					paddingLeft: SizeUtils.translateDesignWidthToCode(28),
					paddingRight: SizeUtils.translateDesignWidthToCode(28),
					flexDirection: "row",
					backgroundColor: "#fff",
					paddingBottom: SizeUtils.translateDesignHeightToCode(26)
				}}
			>
				<TouchableOpacity
					style={{
						flex: 1,
						backgroundColor: "#adadad",
						borderRadius: SizeUtils.translateDesignNumToCode(10),
						alignItems: "center",
						justifyContent: "center"
					}}
					onPress={this._onEmptyPress}
				>
					<Text
						style={{
							color: "#ffffff",
							fontSize: SizeUtils.translateFontSizeToCode(28)
						}}
					>
						清空
					</Text>
				</TouchableOpacity>
				<View
					style={{ width: SizeUtils.translateDesignWidthToCode(10) }}
				/>
				<TouchableOpacity
					style={{
						flex: 1,
						backgroundColor: "#ee3535",
						borderRadius: SizeUtils.translateDesignNumToCode(10),
						alignItems: "center",
						justifyContent: "center"
					}}
					onPress={this._onSubmitPress}
				>
					<Text
						style={{
							color: "#ffffff",
							fontSize: SizeUtils.translateFontSizeToCode(28)
						}}
					>
						提交反馈
					</Text>
				</TouchableOpacity>
			</View>
		);
	}
}
